<template>
	<div>
		<el-tabs v-model="state.actTab" @tab-change="tabChange">
			<el-tab-pane v-for="i in tabs" :key="i.key" :name="i.key" :label="i.val"></el-tab-pane>
		</el-tabs>
		<component :is="actComponent" />
	</div>
</template>

<script setup>
const tabs = [
	{
		key: 'reward',
		val: '邀请奖励规则'
	},
	{
		key: 'settle',
		val: '邀请分销结算'
	},
	{
		key: 'set',
		val: '阶段设置'
	}
]

import { onMounted, reactive, shallowRef } from 'vue'

import reward from './components/reward.vue'
import settle from './components/settle.vue'
import set from './components/set.vue'
const actComponent = shallowRef(reward)
const state = reactive({
	actTab: 'reward',
	form: {}
})

const tabChange = val => {
	state.actComponent = val
	switch (val) {
		case 'reward':
			actComponent.value = reward
			break
		case 'settle':
			actComponent.value = settle
			break
		case 'set':
			actComponent.value = set
			break
	}
}

const getData = () => {
	const obj = {
		name: '',
		billingCycle: 0,
		firstEnable: true,
		firstAmount: undefined,
		firstPoint: 0
	}
	const { name, billingCycle, firstEnable, firstAmount, firstPoint, secondEnable } = obj
	console.log('secondEnable', secondEnable)
}

onMounted(() => {
	getData()
})
</script>

<style scoped lang='scss'>
</style>